<template>
  <div class="root">
    <h4>{{menulist.title}}</h4>
    <p>
      <span class="time">发表时间：{{menulist.add_time | dateFormat}}</span>
      <span class="num">点击次数：{{menulist.click}}</span>
    </p>
    <hr />
    <div class="title">
      <div v-html="menulist.content">{{menulist.content}}</div>
    </div>
    <comment-view></comment-view>
  </div>
</template>

<script>
import { mapState, mapMutations } from 'vuex'
export default {
  data () {
    return {
      menulist: {},
      text: ' ',
      list: [],
      arr: []
    }
  },
  created () {
    this.getMenList()
    this.getArr()
  },
  methods: {
    ...mapMutations(['setNewsList']),
    async getMenList () {
      const { data: res } = await this.$http.get('/api/getnew/' + this.newsListId)
      this.menulist = res.message[0]
      console.log(res)
    },
    async getArr () {
      const { data: res } = await this.$http.get(
        '/api/getcomments/' + this.newsListId + '?pageindex=1'
      )
      this.arr = res.message
      this.setNewsList(this.arr)
    },
    logout () {
      this.$router.push('/news')
    },
    push () {
      const obj = { content: '' }
      obj.content = this.text
      console.log(this.text)
      this.list.push(obj)
      this.text = ''
    }
  },
  computed: {
    ...mapState(['newsListId'])
  }
}
</script>

<style>
.root {
  margin-top: 47px;
}
h4 {
  text-align: center;
  color: #1989fa;
}
hr {
  margin: 4px;
}
.time {
  color: #1989fa;
  margin-left: 10px;
  font-size: 14px;
}
.num {
  color: #1989fa;
  float: right;
  margin-right: 10px;
  font-size: 14px;
}
.title {
  margin: 0 5px;
}
.title h3 {
  color: #535353;
}
.title p {
  color: #535353;
  font-size: 16px;
}
.title .fa {
  color: #000;
}
textarea {
  font-size: 16px;
  width: 355px;
}
.pinglun {
  height: 50px;
  width: 355px;
  background-color: #1989fa;
  font-size: 20px;
  color: #ecf5ff;
}
.user {
  height: 25px;
  background-color: #cccccc;
  margin-bottom: 50px;
}
.user p {
  color: #000;
  margin: 5px 10px;
  font-size: 13px;
  line-height: 25px;
}
.dataload {
  text-align: center;
  color: #c6c6c7;
}
.upload {
  height: 50px;
  width: 355px;
  background-color: #fafafa;
  border: 1px solid red;
  color: red;
}
.comeback {
  height: 50px;
  width: 355px;
  background-color: #1989fa;
  color: #fff;
}
</style>
